import React, { FC, useState } from 'react';
import { Icon } from 'choerodon-ui';
import styles from '../style.less';

interface HeaderCollapseProps {
  title?: string;
  initShow?: boolean;
  children?: any;
  id?: string;
}

const IconColor = {
  color: '#3889FF',
};

const HeaderCollapse: FC<HeaderCollapseProps> = props => {
  const { title, initShow = true, id } = props;
  const [show, toggleShow] = useState(initShow);
  return (
    <>
      <div className={styles.title} id={id}>
        <div className={styles['title-detail']}>{title}</div>
        <div className={styles['title-right']} onClick={() => toggleShow(prev => !prev)}>
          {show ? (
            <>
              <span>收起</span>
              <Icon type="expand_less" style={IconColor} />
            </>
          ) : (
            <>
              <span>展开</span>
              <Icon type="expand_more" style={IconColor} />
            </>
          )}
        </div>
      </div>
      {show && props.children}
    </>
  );
};

export default HeaderCollapse;
